<template>
	<div class="">
		<t-dialog
			placement="top"
			:header="tasktype == 'Pause' ? '批量暂停任务' : '批量开始任务'"
			body="水平居中显示的对话框"
			:visible="isshow"
			:footer="true"
			width="800px"
			:confirm-btn="tasktype == 'Pause' ? '确认暂停' : '确认开始'"
			cancel-btn="取消"
			:on-confirm="onConfirm"
			:on-close="closefn"
		>
		<dk-divider style="margin: 10px 0"></dk-divider>	
		<t-table
				row-key="index"
				:columns="columns"
				:data="data"
				:selected-row-keys="selectedRowKeys"
				:active-row-type="activeRow ? 'single' : undefined"
				:select-on-row-click="selectOnRowClick"
				lazy-load
				@select-change="rehandleSelectChange"
				stripe
			></t-table>
		</t-dialog>
	</div>
</template>

<script setup lang="jsx">
import { ref, defineProps, reactive } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { PlayIcon, PauseIcon } from 'tdesign-icons-vue-next';

import { ErrorCircleFilledIcon, CheckCircleFilledIcon, CloseCircleFilledIcon } from 'tdesign-icons-vue-next';

const selectOnRowClick = ref(true);

// const statusNameListMap = {
// 	0: { label: '审批通过', theme: 'success', icon: <CheckCircleFilledIcon /> },
// 	1: { label: '审批失败', theme: 'danger', icon: <CloseCircleFilledIcon /> },
// 	2: { label: '审批过期', theme: 'warning', icon: <ErrorCircleFilledIcon /> }
// };

const data = [];
for (let i = 0; i < 5; i++) {
	data.push({
		index: i + 100,
		applicant: ['贾明', '张三', '王芳'][i % 3],
		// status: i % 3,
		// channel: ['电子签署', '纸质签署', '纸质签署'][i % 3],
		detail: {
			email: ['w.cezkdudy@lhll.au', 'r.nmgw@peurezgn.sl', 'p.cumx@rampblpa.ru'][i % 3]
		},
		// matters: ['宣传物料制作费用', 'algolia 服务报销', '相关周边制作费', '激励奖品快递费'][i % 4],
		// time: [2, 3, 1, 4][i % 4],
		createTime: ['2022-01-01', '2022-02-01', '2022-03-01', '2022-04-01', '2022-05-01'][i % 4]
	});
}

const columns = [
	{
		colKey: 'row-select',
		type: 'multiple',
		// 禁用行选中方式一：使用 disabled 禁用行（示例代码有效，勿删）。disabled 参数：{row: RowData; rowIndex: number })
		// 这种方式禁用行选中，当前行会添加行类名 t-table__row--disabled，禁用行文字变灰
		// disabled: ({ rowIndex }) => rowIndex === 1 || rowIndex === 3,

		// 禁用行选中方式二：使用 checkProps 禁用行（示例代码有效，勿删）
		// 这种方式禁用行选中，行文本不会变灰
		// checkProps: ({ rowIndex }) => ({ disabled: rowIndex % 2 !== 0 }),
		width: 50
	},
	{ colKey: 'applicant', title: '任务名称', width: '100' },
	// {
	// 	colKey: 'status',
	// 	title: '申请状态',
	// 	width: '150',
	// 	cell: (h, { row }) => {
	// 		return (
	// 			<t-tag shape="round" theme={statusNameListMap[row.status].theme} variant="light-outline">
	// 				{statusNameListMap[row.status].icon}
	// 				{statusNameListMap[row.status].label}
	// 			</t-tag>
	// 		);
	// 	}
	// },
	// { colKey: 'channel', title: '签署方式', width: '120' },
	{ colKey: 'detail.email', title: '场景话术', ellipsis: true },
	{ colKey: 'createTime', title: '任务状态' }
];

const activeRow = ref(false);
const selectedRowKeys = ref([]);

const rehandleSelectChange = (value, ctx) => {
	selectedRowKeys.value = value;
	console.log(value, ctx);
};

const onConfirm = () => {
	console.log(selectedRowKeys.value, '======>selectedRowKeys');
};

const props = defineProps({
	// 默认选中的部门id
	isshow: {
		type: String,
		default: ''
	},
	tasktype: {
		type: String,
		default: ''
	}
});
const emit = defineEmits(['eventTaskList']);

//取消
const closefn = () => {
	emit('eventTaskList', false);
};
</script>

<style lang="scss" scoped>
.buttonbut {
	display: flex;
	justify-content: space-between;
}
.outtimecla {
	display: flex;
	flex-direction: column;
	.outtimecla_item {
		display: flex;
		align-items: center;
		padding-bottom: 10px;
	}
}
.play_pause {
	display: flex;
	justify-content: space-evenly;
}
</style>
